<template>
  <div>
    <el-card class="box-card">
      <Bread></Bread>
      <div id="main" style="width: 600px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
//导入echarts
// import echarts from "echarts";
//导入lodash
import _ from "lodash";
import Bread from "@/components/breadmenu";
export default {
  components: { Bread },
data(){
  return{
  options: {
    title: {
      text: "用户来源"
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#E9EEF3"
        }
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        boundaryGap: false
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ]
  },
  }
},
  created() {},
  async mounted() {
    //在页面dom元素加载完毕之后执行的钩子函数mounted
    // 基于准备好的dom，初始化echarts实例
    var echarts = require('echarts');
    var myChart = echarts.init(document.getElementById('main'))
    //准备数据和配置项
    //发送请求获取折线图数据
    const { data: res } = await this.$http.get('reports/type/1')

    if (res.meta.status !== 200) {
      return this.$message.error('获取折线图数据失败')
    }

    //合并res.data和this.options
    const result = _.merge(res.data,this.options)

    // 使用获取的数据展示图表
    myChart.setOption(result)
  },
  methods: {}
};
</script>
<style lang="scss">
#main {
  margin-top: 15px;
}
</style>